1時間プログラミング 008 標準入力から受け取ったコードを、シンタックスハイライトを適用した画像に変換するコマンド

#1時間プログラミング

概要

標準入力から受け取ったコードを、シンタックスハイライトを適用した画像に変換するコマンド

所要時間: 1時間

使い方

code:terminal

$ cat sample/factorial.js | node index.js

$ open image.png

https://raw.githubusercontent.com/emanon001/1hour/main/008-syntax-highlight-img/highlight.png

実装

コード → シンタックスハイライトした結果のHTML → 画像という変換フローを考えている

まずコードを標準入力から受け取る

code:js

import process from 'process';

import { readFileSync } from 'fs';

/**

* 標準入力から文字列を読み込む

* @return {string}

const readInput = () => {

return readFileSync(process.stdin.fd, 'utf8');

};

const code = readInput();

コード → シンタックスハイライトした結果のHTMLについては、highlight.jsを使う

のNode.js on the Serverを参照

code:js

import hljs from 'highlight.js';

const code = '...';

const html = hljs.highlightAuto(code).value

hljs.highlightAuto(code)の結果はHTMLの部品なので、以下のようにHTMLを組み立てる

code:js

/**

* HTMLを作成する

* @param {string} highlight

* @return {string}

const buildHtml = (highlight) => {

return `

<!DOCTYPE html>

<head>

</head>

<body>

<pre><code>${highlight}</code></pre>

</body>

</html>`;

};

const html = buildHtml(hljs.highlightAuto(code).value);

シンタックスハイライトした結果のHTML → 画像についてはnode-html-to-imageを使う

code:js

import nodeHtmlToImage from 'node-html-to-image';

// 省略

nodeHtmlToImage({

output: './image.png',

html,

}).then(() => {

console.log('The image was created successfully');

});

https://raw.githubusercontent.com/emanon001/1hour/main/008-syntax-highlight-img/highlight.png

感想

ライブラリがすでに存在しているので、それを繋ぎこむだけだった

お題の選択肢が少なくなるので、コマンドライン縛りはなくした方がいいかも